<template>
    <div class="layers-component">
      <div class="layers-box">
        <span>图层目录</span>
        <div>
          <el-icon v-if="isCollapse" @click="CollapseHandler"><ArrowRight /></el-icon>
          <el-icon v-else @click="CollapseHandler"><ArrowDown /></el-icon>
          <el-icon @click="closeHandler"><Close /></el-icon>
        </div>
      </div>
      <el-tree
        class="custom-tree"
        style="max-width: 600px"
        :data="treeData"
        show-checkbox
        node-key="id"
        default-expand-all
        :default-checked-keys="[0,1,2,3,4,5]"
        :props="defaultProps"
        @check='getCurrentNode'
      />
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted ,getCurrentInstance} from 'vue';
  import { storeToRefs} from 'pinia'
  import {useMapStore} from '../../stores/map.js'
  const {docLayer}=storeToRefs(useMapStore());
  const defaultProps = {
    children: 'children',
    label: 'label',
  };

  const isCollapse=ref(true);
  
  const treeData = ref([
    {
      id: 999,
      label: '地图文档',
      disabled: true,
      Checked:true,
      children: [
        {
          id: 1000,
          label: '新地图1',
          disabled: true,
          Checked:true,
          children: [],
        },
      ],
    },
  ]);

  const closeHandler=()=>{
    document.querySelector('.layers-component').style.display='none';
  }
  const CollapseHandler=()=>{
    isCollapse.value = !isCollapse.value
    document.querySelector('.custom-tree').style.display=isCollapse.value?'none':'block';
  }

  const getCurrentNode=(data)=>{
    
    console.log(data,'data')
    // 获取当前选中的图层
    console.log(data.id);
    treeData.value[0].children[0].children.at(data.id).Checked=!treeData.value[0].children[0].children.at(data.id).Checked;
    const check=treeData.value[0].children[0].children.at(data.id).Checked
    docLayer.value.setLayerStatus(data.id, check ? 'include' : 'exclude')
  }

  
  onMounted(() => {
    var docCatalog = new Zondy.Catalog.MapDoc({
      docName: 'guanggu', // 替换为你实际的地图文档名称
    });
    const { proxy } = getCurrentInstance();
    // 模拟异步获取地图文档图层信息
    setTimeout(() => {
        console.log(proxy.$map,'aaaa')
        proxy.$map.addLayer(docLayer.value)
      docCatalog.getLayersInfo((res) => {
        console.log(res);
        // 假设 res.value[0] 包含有效的图层信息
        for (const item of res.value) {
        treeData.value[0].children[0].children.push({
          id: item.LayerIndex,
          label: item.Name,
          Checked:true,
        });
      }
      // Vue 3 响应式数据更新，确保 Vue 可以检测到变化
      treeData.value = [...treeData.value];
    });
  },1000);
  
  });


  </script>
  
  <style lang="scss" scoped>
  .custom-tree {
    background-color: white;
    width: 200px; /* 适当调整树形结构的宽度 */
  }
  
  .layers-component {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 80px;
    right: 80px;
    z-index: 9999;
    min-width: 200px;
    

  }
  
  .layers-box {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    background-color: rgb(64, 158, 255);
    color: white;
    padding: 10px;
    border-radius: 5px 5px 0 0;
  }
  </style>
  